<template>
  <div class="top_4_box">
    <div class="top_4_top">
      <h4>订单情况</h4>
    </div>
    <ul class="top_4_list">
      <li>
        <div>
          <p>待支付订单数:</p>
          <p class="top_4_list_num">0</p>
        </div>
      </li>
      <li>
        <div>
          <p>待发货订单数:</p>
          <p class="top_4_list_num">0</p>
        </div>
      </li>
      <li>
        <div>
          <p>待收货订单数:</p>
          <p class="top_4_list_num">0</p>
        </div>
      </li>
      <li>
        <div>
          <p>已成交订单数:</p>
          <p class="top_4_list_num">0</p>
        </div>
      </li>
      <li check="1">
        <div>
          <p>交易失败订单数:</p>
          <p class="top_4_list_num">0</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>
<style lang="scss" scoped>
.top_4_box {
  height: 223px;
  width: 32%;
  border-radius: 5px;
  border: 1px solid rgba(217, 217, 217, 100);

  .top_4_top {
    width: 100%;
    height: 37px;
    line-height: 37px;
    border-radius: 5px 5px 0px 0px;
    background-color: rgba(246, 246, 247, 100);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    font-family: Roboto;
    border-bottom: 1px solid rgba(217, 217, 217, 100);

    h4 {
      width: 95%;
      margin: 0 auto;
    }
  }

  .top_4_list {
    height: 37px;
    line-height: 37px;
    border-radius: 5px 5px 0px 0px;
    background-color: rgba(255, 255, 255, 100);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    font-family: Roboto;

    li[check="1"] {
      border-bottom: none;
    }

    li {
      border-bottom: 1px solid rgba(217, 217, 217, 100);

      div {
        display: flex;
        justify-content: space-between;
        width: 95%;
        margin: 0 auto;

        .top_4_list_num {
          color: rgba(85, 202, 125, 100);
        }
      }
    }
  }
}
</style>